<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <!--<link rel="stylesheet" href="css/iview.min.css">-->
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <!-- Bootstrap Core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <!-- This page CSS -->
  <!-- chartist CSS -->
  <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
  <!--c3 CSS -->
  <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
  <!--Toaster Popup message CSS -->
  <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
  <!-- Custom CSS -->
  <link href="css/style.min.css" rel="stylesheet">
  <!-- Dashboard 1 Page CSS -->
  <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">
  <!--<link href="../assets/node_modules/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/node_modules/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>-->
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
            <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="3"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">客户管理</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item active">客户管理</li>
            </ol>
          </div>
        </div>
        <!--列表-->
        <div class="row bgfff">
          <ul class="nav w100p nav-tabs customtab position-relative" role="tablist">
            <li class="nav-item" v-for="(v,k) in navs" :key="k">
              <a class="nav-link curpointer" data-toggle="tab" role="tab" :class="v.id == navs_id ? 'active' : '' " @click="changeNav(v.id)">
                <span class="hidden-sm-up">
                  <i class="ti-home"></i>
                </span>
                <span class="hidden-xs-down">{{v.title}}</span>
              </a>
            </li>
            <li class="position-absolute top21 bottom0 right30">
              <span class="p-l-20 p-r-20 bgblue cfff bradius4 curpointer fs14 lh30 d-block" @click="addClient">客户录入</span>
            </li>
          </ul>
          <div class="d-flex p-t-20 w100p p-r-31 p-b-17">
            <div class="mr-auto d-flex p-l-30 fs14 cfff lh30 align-cen">
              <template v-if="navs_id != 2">
                <span class="p-l-20 p-r-19 bradius4 m-r-10" :class="isChooseClient ? 'bgblue' : 'bgblue_2'" @click="showMemberList">移至成员</span>
                <span class="p-l-20 p-r-19 bradius4 m-r-10" :class="isChooseClient ? 'bgblue' : 'bgblue_2'" @click="moveCustomer(2)">移至共享</span>
              </template>
              <template v-else>
                <span class="p-l-20 p-r-19 bradius4 m-r-10" :class="isChooseClient ? 'bgblue' : 'bgblue_2'" @click="toMonopoly">抢为独占</span>
              </template>
              <span class="p-l-20 p-r-19 bradius4 m-r-10 bgblue" @click="exportData">导出</span>
            </div>
            <div class="ml-auto d-flex align-cen">
              <div class="m-r-21">
                <div class="form-group m-b-0 w241">
                  <input type="text" id="company" class="form-control p-l-23 phgray" placeholder="请输入姓名或电话用户" v-model="clientkey">
                </div>
              </div>
              <span class="bgblue p-l-20 p-r-19 bradius4 m-r-10 cfff fs14 lh30" @click="searchClient">查询</span>
            </div>
          </div>
          <div class="row w100p p-l-30">
            <div class="col-12">
              <div class="card m-b-0">
                <table id="example23" class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
                  <thead>
                    <tr>
                      <th>
                        <!--<input type="checkbox">-->
                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3" :class="allChecks? 'mdi-check checks' : '' " @click="checkAll"></span>
                      </th>
                      <th>编号</th>
                      <th>姓名</th>
                      <th>手机号码</th>
                      <th>邮箱</th>
                      <th>微信号</th>
                      <th>录入时间</th>
                      <th>标签</th>
                      <th>成交金额</th>
                      <!--<th>跟进人</th>-->
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody class="bgfff">
                    <tr v-for="(v,k) in lists" :key="k" class="curpointer" @click="toDetail(v.cardId)">
                      <td @click.stop="">
                        <span class="w16 h16 bradius4 bced d-inline-block mdi position-relative top3" :class="v.checked ? 'mdi-check checks':''" @click.stop="checkTap(k)"></span>
                      </td>
                      <td>{{v.customerId}}</td>
                      <td>{{v.name}}</td>
                      <td>{{v.phone}}</td>
                      <td>{{v.email}}</td>
                      <td>{{v.personalWx}}</td>
                      <td>{{v.inputDate}}</td>
                      <td class="lh30 fs14">
                        <span class="p-l-20 p-r-20 bradius6 m-r-10 m-b-10 curpointer lh30 d-inline-block" v-for="(item,idx) in v.lableModelList" :key="idx" :class="item.lableColor.toLowerCase() == '#f5f5f6' ? 'c78' : 'cfff' " :style="{background:item.lableColor}">
                          {{item.lableName}}
                        </span>
                      </td>
                      <td class="cffa133">￥{{v.turnoverAmount | formatMoney}}</td>
                      <!--<td class="c26">跟进人</td>-->
                      <td @click.stop>
                        <a :href="'/main/add-client.html?id='+v.cardId">
                          <span class="d-inline-block m-r-40 curpointer">编辑</span>
                        </a>
                        <a :href="'/main/shareCustomerDetail.html?id='+v.cardId">
                          <span class="d-inline-block cblue curpointer">详情</span>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div class="textc" v-if=" !lists.length || lists.length < 0">暂无数据</div>
              </div>
              <!--分页-->
              <div class="d-flex p-b-50 jsend">
                <page-helper :page-number="page" :total-count="total" @change="jumpPage"></page-helper>
              </div>
            </div>
          </div>
        </div>
        <select-member v-model="ascriptionId" :is-show="to_member_show" @confirm="moveCustomer(1)" @cancel="to_member_show=false"></select-member>
      </div>
    </div>
  </div>
  <!-- All Jquery -->
  <!-- ============================================================== -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap popper Core JavaScript -->
  <!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
  <script src="js/bootstrap.min.js"></script>
  <!--<script src="js/iview.min.js"></script>-->
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <!--<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>-->
  <!-- slimscrollbar scrollbar JavaScript -->
  <script src="js/perfect-scrollbar.jquery.min.js"></script>
  <!--Wave Effects -->
  <!-- <script src="js/waves.js"></script> -->
  <!--Menu sidebar -->
  <script src="js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="js/custom.min.js"></script>
  <!-- ============================================================== -->
  <!-- This page plugins -->
  <!-- ============================================================== -->
  <!--morris JavaScript -->
  <!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
  <!--c3 JavaScript -->
  <!-- <script src="../assets/node_modules/d3/d3.min.js"></script>
<script src="../assets/node_modules/c3-master/c3.min.js"></script> -->
  <!-- Popup message jquery -->
  <!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->
  <!-- Chart JS -->
  <!--<script src="js/dashboard1.js"></script>-->
  <!-- ============================================================== -->
  <!-- Style switcher -->
  <!-- ============================================================== -->
  <!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
  <script src="js/layer/layer.js"></script>
  <!--<script src="../assets/node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="../assets/node_modules/bootstrap-table/dist/bootstrap-table.ints.js"></script>-->
  <script src="js/vue.js"></script>
  <script src="js/config.js"></script><script src="js/extend.js"></script>
  <!--<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>-->
  <!--<script src="js/headers.js"></script>-->
  <!--<script src="js/Aside.js"></script>-->
  <script>
  $(function() {
    var vw = new Vue({
      el: '#main-wrapper',
      // components:{header},
      data: {
        username: '用户昵称',
        search_key: '', //搜索关键字
        useSearchKey: '',
        navs: [
          { title: '独占客户', id: 1 },
          { title: '成单客户', id: 3 },
          { title: '共享客户', id: 2 },
        ],
        navs_id: 1,
        chooseArr: [],
        clientkey: '', //搜索姓名或电话用户
        lists: [],
        mainHeight: '',
        allChecks: false,
        page: 1,
        total: 0,
        to_member_show: false,
        ascriptionId: '',
      },
      mounted() {
        this.getClientList();
      },
      methods: {
        exportData() {
          let data = {
            type: 1,
            customerState: this.navs_id,
          }
          fetch($.baseUrl + '/crmPc/customer/getCustomerExport?data=' + $.base64.encode(JSON.stringify(data)), {
            headers: {
              token: localStorage.getItem('token'),
              'content-type': 'application/json'
            },
            method: 'POST',
          }).then(res => {
            return res.blob();
          }).then(res => {
            let link = document.createElement('a');
            let url = window.URL.createObjectURL(res);
            link.href = url;
            link.download = '客戶列表.xls';

            link.click();
            window.URL.revokeObjectURL(url);
          });
          // return
          // $.cAjax('/crmPc/customer/getCustomerExport', {
          //     type: 'POST',
          //     responseType: 'blob',
          //     data:{
          //         type:1,
          //         customerState: this.navs_id,
          //     },
          //     success(res){
          //         console.log(typeof res);
          //         let blob = new Blob(res);
          //         let link = document.createElement('a');
          //         let url = window.URL.createObjectURL(blob);
          //         link.href = url;
          //         link.download = '客戶列表.xls';
          //
          //         link.click();
          //         window.URL.revokeObjectURL(url);
          //     },
          // });
          // var xhr = new XMLHttpRequest();
          //
          // xhr.open('POST', $.baseUrl+'/crmPc/customer/getCustomerExport?type=1&customerState=' + this.navs_id, true);
          //
          // xhr.setRequestHeader('token', localStorage.getItem('token'));
          //
          // xhr.responseType = "blob";
          //
          // xhr.onload = function () {
          //     if (this.status === 200) {
          //
          //         var blob = this.response;
          //
          //         var reader = new FileReader();
          //
          //         reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
          //
          //         reader.onload = function (e) {
          //
          //             // 转换完成，创建一个a标签用于下载
          //
          //             var a = document.createElement('a');
          //
          //             a.download = 'data.xlsx';
          //
          //             a.href = e.target.result;
          //
          //             $("body").append(a);
          //
          //             a.click();
          //
          //             $(a).remove();
          //
          //         }
          //
          //     }
          //
          // };
          //
          //
          // xhr.send('type=1&customerState=' + this.navs_id)
        },
        getClientList() {
          var _this = this;

          $.cAjax('/crmPc/customer/getCustomerPC', {
            data: {
              type: 1,
              pageNum: this.page,
              name: this.useSearchKey,
              customerState: this.navs_id
            }
          }).then(function(res) {
            _this.lists = res.pageInfo.list ? res.pageInfo.list.map(val => {
              try {
                val.followRemark = JSON.parse(val.followRemark);
              } catch (e) {
                val.followRemark = {};
              }

              return val;
            }) : [];
            _this.allChecks = false;
            _this.total = res.pageInfo.total;
          })
        },
        jumpPage({ currentPage }) {
          this.page = currentPage;
          this.getClientList();
        },
        searchClient() { //搜索
          this.useSearchKey = this.clientkey || '';
          this.page = 1;
          this.getClientList();
        },
        toMonopoly() {
          let chooseArr = this.lists.filter(val => val.checked);

          if (!chooseArr.length) return;

          let _this = this;
          let customerIds = chooseArr.map(val => val.customerId);

          $.cAjax('/crmPc/customer/updBatchCustomerState', {
            data: {
              customerIds: customerIds.join(',')
            }
          }).then(function(data) {
            layer.alert('抢为独占成功', { time: 1500 });
            _this.allChecks = false;
            _this.getClientList();
          });
        },
        showMemberList() {
          let chooseArr = this.lists.filter(val => val.checked);

          if (!chooseArr.length) {
            return;
          }
          this.to_member_show = true;
        },
        // 移动客户
        moveCustomer(customerState) {
          let chooseArr = this.lists.filter(val => val.checked);

          if (customerState == 1 && !this.ascriptionId) {
            layer.alert('请选择移交给的员工');
            return;
          }

          if (!chooseArr.length) {
            return;
          }

          let _this = this;
          let customerIds = chooseArr.map(val => val.customerId);

          $.cAjax('/crmPc/customer/moveCustomer', {
            data: {
              customerIds: customerIds.join(','),
              ascriptionId: this.ascriptionId,
              customerState: customerState
            }
          }).then(function(data) {
            layer.alert('移交成功', { time: 1500 });
            _this.to_member_show = false;
            _this.getClientList();
          });
        },
        changeNav(id) { //切换导航
          this.navs_id = id;
        },
        addClient() { //客户录入
          location.href = location.origin + '/main/add-client.html'
        },
        checkAll() {
          this.allChecks = !this.allChecks;
          let v = this;
          v.lists.forEach(function(i, k) {
            v.$set(i, 'checked', v.allChecks);
          })
          console.log(this.allChecks)
          console.log(v.lists)
        },
        checkTap(index) {
          let v = this,
            check_length = 0;
          console.log(index)
          v.$set(v.lists[index], 'checked', !v.lists[index].checked);
          v.lists.forEach(function(i, k) {
            if (i.checked) {
              check_length++;
            }
          });
          if (check_length == v.lists.length) {
            v.allChecks = true;
          } else {
            v.allChecks = false;
          }
        },
        toDetail(id) { //客户详情
          location.href = 'shareCustomerDetail.html?id=' + id;
        }


      },
      computed: {
        isChooseClient() {
          var check_length = 0;

          this.lists.forEach(function(i, k) {
            if (i.checked) {
              check_length++;
            }
          });

          return check_length != 0;
        },
      },
      watch: {
        navs_id: function() {
          this.page = 1;
          this.getClientList();
        }
      }
    })
  })
  </script>
</body>

</html>
